<template>
  {{ $route.params.shopId }}
  <el-container class="layout-container-demo" style="height: 100vh">
    <el-main>
      <el-scrollbar>
        <el-table :data="tableData">
          <el-table-column prop="id" label="商品编号" />
          <el-table-column prop="title" label="标题" />
          <el-table-column prop="wdescribe" label="描述" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="shippingAddressId" label="发货地id" />
          <el-table-column prop="shopId" label="商店id" />
          <el-table-column prop="number" label="数量" />
          <el-table-column prop="enable" label="可用" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="addToShoppingCart(scope.row)">添加到购物车</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
  </el-container>
</template>
  
<script lang="ts" setup>
import { ref, toRaw } from 'vue'
import { getCommodityByShopId, getCommodity } from "../../api/commodity/"
import { ElContainer } from 'element-plus';
import { useRouter } from 'vue-router'
import { mainStore } from "../../store/index";
const router = useRouter();
const store = mainStore();

// 所有商品
let tableData = ref([])
const shopId = router.currentRoute.value.query.shopId;
if (shopId != null) {
  const CommodityByShopId = getCommodityByShopId({
    shopId: shopId
  })
  CommodityByShopId.then((res) => {
    if (res.code === 200) {
      tableData.value = res.data
    }
  })
} else {
  const allCommodity = getCommodity({})
  allCommodity.then((res) => {
    if (res.code === 200) {
      tableData.value = res.data
    }
  })
}

type commodityType = {
  "id": number,
  "title": string,
  "price": number,
  "shippingAddressId": number,
  "shopId": number,
  "wdescribe": string,
  "number": number,
  "choose":any
}
const addToShoppingCart = (commodityProxy: any) => {
  const commodity: commodityType = toRaw(commodityProxy)
  if (store.shoppingCart.find(obj => obj.id === commodity.id)) {
    store.shoppingCart.find(obj => obj.id === commodity.id).number++
  } else {
    commodity.number = 1
    commodity.choose = ref(true)
    store.shoppingCart.push(commodity)
  }
}




</script>
  
<style scoped></style>
  